<template>
  <div class="CODECOM">
    <CodeEdit
      class="CodeEdit"
      :language="language"
      v-model="code"
    ></CodeEdit>
    <div class="btns">
      <el-button
        @click="save"
        type="primary"
      >保存</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import {CommonPropsMixin} from "@/views/dashboard/CommonPropsMixin";
import CodeEdit from "@/components/CodeEdit/index.vue";
import fileReq from "@/api/file.js";
import {ElMessage} from "element-plus";
import pathBrowserify from "path-browserify";
import {OtherCode} from "@/views/dashboard/OtherCode";
import {PathUtils} from "@/utils/PathUtils";

export default {
  name: "CODECOM",
  components: {CodeEdit},
  mixins: [CommonPropsMixin],
  data() {
    return {
      code: ''
    }
  },
  computed: {
    language() {
      let type = PathUtils.extName(this.openFile).split('.')[1].toLowerCase()
      if(OtherCode.includes(type)) {
        return 'ini'
      }
      return type
    }
  },
  watch: {
    openFile: {
      immediate: true,
      handler() {
        fileReq.getTextFile(pathBrowserify.resolve(this.baseFilePath,this.openFile)).then(res=>{
          this.code = res.data
        })
      }
    }
  },
  methods: {
    save() {
      fileReq.saveTextFile(pathBrowserify.resolve(this.baseFilePath,this.openFile),this.code).then(res=>{
        ElMessage.success(res.data as string)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.CODECOM{
  height: 70vh;
  .CodeEdit{
    height: calc(70vh - 50px) !important;
  }
  .btns{
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
}
</style>
